<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情页</title>
		<link rel="stylesheet" href="style/details.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--  头部  -->
		<div id="top">
			<div class="margin">
				<div class="left">
					<a href="javascript:;"><i class="mia-icon icon-mobile"></i>手机蜜芽</a>
				</div>
				<div class="right">
					<span>你好，欢迎来到蜜芽！</span>
					<a href="login.html">登录</a><em>|</em>
					<a href="register.html">免费注册</a>
					<a href="javascript:;">帮助中心</a>
				</div>
			</div>
		</div>
		
		<!--  logo、搜索栏  -->
		<div id="header">
			<div class="margin clear">
				<a href="javascript:;" class="log"><img src="images/t1.png" /></a>
				<div class="header-r">
					<div class="search">
						<div class="search-t">
							<input type="text" class="st" placeholder="尤妮佳"/>
							<input type="button" class="sb" value="搜索"/>
						</div>
						<p class="search-b">
							<a href="javascript:;" class="t">牙胶</a>
							<a href="javascript:;" class="t">收纳柜</a>
							<a href="javascript:;">隔尿垫</a>
							<a href="javascript:;">加州宝宝</a>
							<a href="javascript:;">安全座椅</a>
						</p>
					</div>
					<div class="cart">
						<a href="cart.html" class="item">
							<span class="mia-icon icon-cart"><b></b></span>
							购物车
						</a>
						<div class="more"></div>
					</div>
				</div>
			</div>
		</div>
		
		<!--  导航  -->
		<div id="nav">
			<div class="margin">
				<ul class="navs">
					<li class="active"><a href="javascript:;">首页</a></li>
					<li><a href="javascript:;">纸尿裤</a></li>
					<li><a href="javascript:;">奶粉</a></li>
					<li class="guarantee">
						<a href="javascript:;">正品保证
							<i class="mia-icon icon-angle-down"></i>
						</a>
						<div class="lists">
							<a href="javascript:;"><span>正品保证</span></a>
							<a href="javascript:;"><span>退货政策</span></a>
							<a href="javascript:;"><span>帮助中心</span></a>
						</div>
					</li>
					<li><a href="javascript:;">早教音乐</a></li>
				</ul>
				
				<div class="menus">
					<div class="title">
						<h3>全部商品分类</h3>
					</div>
					<div class="dlist">
						<dl>
							<dt>
								<div class="inner">
									<strong><a href="javascript:;">奶粉/纸尿裤</a></strong>
									<p>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<i class="mia-icon icon-right-open-big"></i>
									</p>
								</div>
							</dt>
							<dd>
								
							</dd>
						</dl>
						
						<dl>
							<dt>
								<div class="inner">
									<strong><a href="javascript:;">奶粉/纸尿裤</a></strong>
									<p>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<i class="mia-icon icon-right-open-big"></i>
									</p>
								</div>
							</dt>
							<dd>
								
							</dd>
						</dl>
						
						<dl>
							<dt>
								<div class="inner">
									<strong><a href="javascript:;">奶粉/纸尿裤</a></strong>
									<p>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<i class="mia-icon icon-right-open-big"></i>
									</p>
								</div>
							</dt>
							<dd>
								
							</dd>
						</dl>
						
						<dl>
							<dt>
								<div class="inner">
									<strong><a href="javascript:;">奶粉/纸尿裤</a></strong>
									<p>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<i class="mia-icon icon-right-open-big"></i>
									</p>
								</div>
							</dt>
							<dd>
								
							</dd>
						</dl>
						
						<dl>
							<dt>
								<div class="inner">
									<strong><a href="javascript:;">奶粉/纸尿裤</a></strong>
									<p>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<i class="mia-icon icon-right-open-big"></i>
									</p>
								</div>
							</dt>
							<dd>
								
							</dd>
						</dl>
						
						<dl>
							<dt>
								<div class="inner">
									<strong><a href="javascript:;">奶粉/纸尿裤</a></strong>
									<p>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<i class="mia-icon icon-right-open-big"></i>
									</p>
								</div>
							</dt>
							<dd>
								
							</dd>
						</dl>
						
						<dl>
							<dt>
								<div class="inner">
									<strong><a href="javascript:;">奶粉/纸尿裤</a></strong>
									<p>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<i class="mia-icon icon-right-open-big"></i>
									</p>
								</div>
							</dt>
							<dd>
								
							</dd>
						</dl>
						
						<dl>
							<dt>
								<div class="inner">
									<strong><a href="javascript:;">奶粉/纸尿裤</a></strong>
									<p>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<a href="javascript:;">婴儿奶粉</a>
										<i class="mia-icon icon-right-open-big"></i>
									</p>
								</div>
							</dt>
							<dd>
								
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
		
		<!--  列表下拉  -->
		<script type="text/javascript">
			var title=document.getElementById('nav').getElementsByClassName('title')[0];
			var dlist=document.getElementById('nav').getElementsByClassName('dlist')[0];
			title.onmouseover=function(){
				dlist.style.display='block';
				dlist.onmouseover=function(){
					dlist.style.display='block';
				}
			}
			title.onmouseout=function(){
				dlist.style.display='none';
			}
			dlist.onmouseout=function(){
				dlist.style.display='none';
			}
		</script>
		
		
		<!-- 放大镜  -->
		<div id="main" class="margin">
			<div class="main-l">
				<div class="spic">
					<img src="https://img01.miyabaobei.com/d1/p5/item/10/1001/1001264_topic_1.jpg" class="simg" />
					<div class="small"></div>
					<img src="images/t11.png" class="pos" />
				</div>
				<div class="bpic">   
					<img src="https://img01.miyabaobei.com/d1/p5/item/10/1001/1001264_topic_1.jpg" class="big" />
				</div>
				<div class="list">
					<ul>
						<li class="active"><img src="https://img02.miyabaobei.com/d1/p5/item/10/1001/1001264_topic_1.jpg" /></li>
						<li><img src="https://img04.miyabaobei.com/d1/p5/item/10/1001/1001264_topic_2.jpg" /></li>
						<li><img src="https://img04.miyabaobei.com/d1/p5/item/10/1001/1001264_topic_3.jpg" /></li>
						<li><img src="https://img04.miyabaobei.com/d1/p5/item/10/1001/1001264_topic_4.jpg" /></li>
						<li><img src="https://img02.miyabaobei.com/d1/p5/item/10/1001/1001264_topic_1.jpg" /></li>
					</ul>
				</div>
			</div>
			
			<div class="main-r">
				<div class="top">
					<img src="images/t12.png" />
					<span>海外品牌</span>|
					<span>蜜芽保税仓发货</span>
				</div>
				<div class="title">
					<span class="te">[包邮]</span>
					<a href="javascript:;">康萃乐 Culturelle</a>
					<span>儿童Lgg益生菌粉 30袋</span>
				</div>
				<div class="content">
					新配方不含牛奶，一盒共30小包 。正常情况下一周两到三次，如遇需拉肚子等情况，每天一次，饭后服用。
				</div>
				<div class="price">
					<div class="pt">
						<span>售价</span>
						<span class="new">
							￥<em>139.00</em>
						</span>
						<span class="old">
							￥<em>179.00</em>
						</span>
						<span class="shui">进口税</span>
					</div>
					<div class="pb">
						<span>优惠</span>
						<span class="te">
							<i>直降</i>
							限时特价
						</span>
					</div>
				</div>
				<div class="select">
					<div class="ke">
						<dt>可选</dt>
						<dd class="kpic">
							<img src="images/p1.png" />
							<i></i>
						</dd>
					</div>
					<div class="num">
						<dt>数量</dt>
						<dd class="nums">
							<span class="del"></span>
							<em>1</em>
							<span class="add"></span>
						</dd>
					</div>
					<div class="fen">
						<dt>评分</dt>
						<dd>
							<div class="stars"></div>
							<span><i>2012</i>位蜜粉推荐</span>
						</dd>
					</div>
					<div class="btn">
						<a href="javascript:;" class="a1">加入购物车</a>
						<a href="javascript:;" class="a2"><i></i>收藏</a>
					</div>
					<div class="bm">
						编码： 1125071
					</div>
					<div class="zy">
						<ul>
							<li>自营</li>
							<li><i></i>不支持7天无理由退货</li>
							<li><i></i>假一赔十</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var $img1=$('#main .main-l .spic .simg');
			var $img2=$('#main .main-l .bpic .big');
			var $title=$('#main .main-r .title a');
			var $new=$('#main .main-r .price .new em');
			var $old=$('#main .main-r .price .old em');
			$.ajax({
				url:"php/mysql.php",
				dataType:'json'
			}).done(function(data){
				for(var i=0;i<$img1.length;i++){
					$img1[i].src=data[i].url;
					$title[i].innerHTML=data[i].title;
					$new[i].innerHTML=data[i].price;
					$old[i].innerHTML=data[i].oldprice;
				}
			});
		</script>

		<!--  数量加减  -->
		<script type="text/javascript">
			var $del=$('#main .main-r .num .del');
			var $num=$('#main .main-r .num em');
			var $add=$('#main .main-r .num .add');
			$add.on('click',function(){
				var $i=parseInt($num.text());
				++$i;
				$num.html($i);
				if($i>1){
					$del.css('background-position','-100px -150px');
				}
			});
			$del.on('click',function(){
				var $i=parseInt($num.text());
				--$i;
				$num.html($i);
				if($i<1){
					$num.html(1);
					$del.css('background-position','0 -150px');
				}
			});
		</script>

		<!--  放大镜效果  -->
		<script type="text/javascript">
			//获取元素
			var mainl=document.getElementsByClassName('main-l')[0];
			var main=document.getElementById('main');
			var spic=mainl.getElementsByClassName('spic')[0];
			var small=document.getElementsByClassName('small')[0];
			var bpic=document.getElementsByClassName('bpic')[0];
			var big=document.getElementsByClassName('big')[0];
			var list=document.getElementsByClassName('list')[0];  
			var spicimg=spic.getElementsByTagName('img')[0];
			var oUl=list.getElementsByTagName('ul')[0];
			var oLi=list.getElementsByTagName('li');
			//鼠标经过
			spic.onmouseover=function(){
				small.style.visibility='visible';
				bpic.style.visibility='visible';
				//设置小放大镜的宽高
				small.style.width=spic.offsetWidth*bpic.offsetWidth/big.offsetWidth+'px';
				small.style.height=spic.offsetHeight*bpic.offsetHeight/big.offsetHeight+'px';
				//放大比例
				var scale=bpic.offsetWidth/small.offsetWidth;
				//鼠标移动
				this.onmousemove=function(ev){
					var ev=ev || window.event;
					//限制鼠标移动时盒子的范围
					var l=ev.clientX-main.offsetLeft-small.offsetWidth/2;  
					var t=ev.clientY-main.offsetTop-small.offsetHeight/2;  

					if(l<0){
						l=0;
					}else if(l>=spic.offsetWidth-small.offsetWidth){
						l=spic.offsetWidth-small.offsetWidth-2;
					}
					if(t<0){
						t=0;
					}else if(t>=spic.offsetHeight-small.offsetHeight){
						t=spic.offsetHeight-small.offsetHeight-2;
					}
					//小放大镜显示范围
					small.style.left=l+'px';
					small.style.top=t+'px';
					//大放大镜显示范围
					big.style.left=-(l+1)*scale+'px';
					big.style.top=-(t+1)*scale+'px';
				}
			}
			//鼠标移出
			spic.onmouseout=function(){
				small.style.visibility='hidden';
				bpic.style.visibility='hidden';
			}
			
			//点击小图出现大图
			for(var i=0;i<oLi.length;i++){
				oLi[i].index=i;
				oLi[i].onmouseover=function(){
					spicimg.src=this.getElementsByTagName('img')[0].src;
					big.src=this.getElementsByTagName('img')[0].src;
					for(var i=0;i<oLi.length;i++){
						oLi[i].className="";
					}
					this.className='active';
				}
			}
		</script>	
		
		
		
		
		
		<!--  底部  -->
		<div id="footer">
			<div class="one margin">
				<a href="javascript:;">
					<img src="images/t3.png" />
					<b>可信赖</b>
					进口母婴特卖
				</a>
				<a href="javascript:;">
					<img src="images/t3.png" />
					<b>可信赖</b>
					进口母婴特卖
				</a>
				<a href="javascript:;">
					<img src="images/t3.png" />
					<b>可信赖</b>
					进口母婴特卖
				</a>
				<a href="javascript:;">
					<img src="images/t3.png" />
					<b>可信赖</b>
					进口母婴特卖
				</a>
				<a href="javascript:;">
					<img src="images/t3.png" />
					<b>可信赖</b>
					进口母婴特卖
				</a>
				<a href="javascript:;">
					<img src="images/t3.png" />
					<b>可信赖</b>
					进口母婴特卖
				</a>
			</div>
			<div class="two margin">
				<div class="two-l">
					<ul>
						<li class="strong">使用帮助</li>
						<li><a href="javascript:;">新手指南</a></li>
						<li><a href="javascript:;">蜜粉值体系</a></li>
						<li><a href="javascript:;">蜜豆体系</a></li>
						<li><a href="javascript:;">正品承诺</a></li>
					</ul>
					<ul>
						<li class="strong">使用帮助</li>
						<li><a href="javascript:;">新手指南</a></li>
						<li><a href="javascript:;">蜜粉值体系</a></li>
						<li><a href="javascript:;">蜜豆体系</a></li>
						<li><a href="javascript:;">正品承诺</a></li>
					</ul>
					<ul>
						<li class="strong">使用帮助</li>
						<li><a href="javascript:;">新手指南</a></li>
						<li><a href="javascript:;">蜜粉值体系</a></li>
						<li><a href="javascript:;">蜜豆体系</a></li>
						<li><a href="javascript:;">正品承诺</a></li>
					</ul>
					<ul>
						<li class="strong">使用帮助</li>
						<li><a href="javascript:;">新手指南</a></li>
						<li><a href="javascript:;">蜜粉值体系</a></li>
						<li><a href="javascript:;">蜜豆体系</a></li>
						<li><a href="javascript:;">正品承诺</a></li>
					</ul>
					<ul class="contact">
						<li class="strong">联系方式</li>
						<li>总裁邮箱 ceo@mia.com</li>
						<li>总裁邮箱 ceo@mia.com</li>
						<li>总裁邮箱 ceo@mia.com</li>
						<li>总裁邮箱 ceo@mia.com</li>
						<li>总裁邮箱 ceo@mia.com</li>
					</ul>
				</div>
				<div class="two-r">
					<p>关注蜜芽</p>
					<div class="box">
						<img src="images/t4.png" class="box-l" />
						<div class="box-r">
							<a href="javascript:;">
								<img src="images/t5.gif" />
							</a>
							<a href="javascript:;">
								<img src="images/t6.gif" />
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="three margin">
				<p class="p1">
					<a href="javascript:;">关于蜜芽</a>|
					<a href="javascript:;">关于蜜芽</a>|
					<a href="javascript:;">关于蜜芽</a>|
					<a href="javascript:;">关于蜜芽</a>|
					<a href="javascript:;">关于蜜芽</a>|
					<a href="javascript:;">关于蜜芽</a>|
					<a href="javascript:;">关于蜜芽</a>|
					<a href="javascript:;">关于蜜芽</a>
				</p>
				<p class="p2">
					 京公网安备：11010502027270 | 营业执照：91110105582599307U | 食品经营许可证：SP1101051410296669 | 出版物经营许可证：新出发京零字第朝160088号 | 京ICP证140430号 <br /> 京ICP备14006215号 | 员工舞弊举报：jiancha@mia.com 电话：010-56733467<br /> 通过本网站直接或者间接地推销商品或者服务的商业宣传活动均属“广告” <br />Copyright © 2017 北京花旺在线商贸有限公司 Mia.com 保留一切权利。
				</p>
				<p class="p3">
					<a href="javascript:;"><img src="images/t7.png" width="100px"/></a>
					<a href="javascript:;"><img src="images/t8.png" width="114px" /></a>
					<a href="javascript:;"><img src="images/t9.png" /></a>
					<a href="javascript:;"><img src="images/t10.png" /></a>
				</p>
			</div>
		</div>
		
		
		<!-- 购物车、咨询、微信 -->
		<div id="list">
			<ul>
				<li><a href="cart.html"><i class="mia-icon icon-cart"></i>购物车</a></li>
				<li><a href="javascript:;"><i class="mia-icon icon-zixun"></i>咨询</a></li>
				<li class="last"><a href="javascript:;"><i class="mia-icon icon-wx"></i>微信</a></li>
			</ul>
		</div>
				
	</body>
</html>


		






